import styled from "styled-components";

import runtimeDay from '../../assets/img/运行天数@2x.png'
import daytime from '../../assets/img/运行天数框@2x.png'

export const Time = styled.div`
    width:100%;
    height:100%;
    display: flex;
    flex-direction: column;
    .titleName{
        width:100%;
        height:20%;
        position: relative;
        font-family: PingFangSC-Medium;
        font-size: 18px;
        color: #00CCFF;
        letter-spacing: 0;
        font-weight: bold;
        span{
            position: absolute;
            top:5px;
            left:10px;
        }
    }
    .TimeContent{
        flex: 1;
         display: flex;
         justify-content:space-around;
         align-items: center;

         .TimeContentImg{
             width:50%;
             height:70%;
             /* background-color: #fff; */
             background-image: url(${runtimeDay});
             background-size: cover;
         }
         .dayImg{
             flex: 1;
             width: 50%;
             height: 70%;
             display: flex;
             justify-content:space-around;
             align-items: center;
             .img{
                 width:24%;
                 height: 70%;
                 background-image: url(${daytime});
                 background-size: 100% 100%;
                 font-family: DINAlternate-Bold;
                font-size: 35px;
                color: #4BF3F9;
                font-weight: 700;
                text-align: center;
                display: flex;
                align-items: center;
                justify-content:center
             }
         }
    }
`
